<template>
    <div class="infobox">
        <div class="searchbox">
            <el-card style="max-width: 480px" class="ypbox">
                <div>
                    <el-input v-model="input1" style="width: 240px" size="large" placeholder="搜索药品"
                        :suffix-icon="Search" @change="changebutton" />
                </div>
                <div class="zsbox">
                    <div @click="changeyp(o)" v-for="o in 200" :key="o" class="ypitem">{{ '药品' + o }}</div>
                </div>
            </el-card>
        </div>
        <div class="lbbox">
            <el-table :data="tableData" border height="400">
                <el-table-column prop="name" label="药品名" align="center" />
                <el-table-column label="处方频次" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.pl" style="width: 100px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="每次剂量" align="center">
                    <template #default="scope">
                        <div class="mcjl">
                            <el-input v-model="scope.row.jl" style="width: 100px;" />
                            <div>g</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="服用方法" align="center" width="180">
                    <template #default="scope">
                        <!-- <el-select v-model="scope.row.eatff" placeholder="Select" size="min">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select> -->
                        <el-input v-model="scope.row.eatff" style="width: 100px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="备注" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.bz" style="width: 100px;" />
                    </template>
                </el-table-column>

                <el-table-column prop="address" label="操作" align="center" width="180">
                    <template #default="scope">
                        <el-button type="danger" @click="deletebutton(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottombox">
                <el-button type="primary" @click="qkbutton">清空</el-button>
                <el-button type="primary" @click="savebutton">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
let input1 = ref()
const tableData = ref([])
const options = [
    {
        name: 'Option1',
        label: 'Option1',
    },

]
let changebutton = () => {
    console.log('input1=====>', input1.value)
}
let changeyp = (e) => {
    console.log('input1=====>', e)
    tableData.value.push({
        name: e + '药品',
        id: e,
        pl: '',
    })
}
let deletebutton = (e) => {
    let idToDelete = e;

    tableData.value = tableData.value.filter(item => item.id !== idToDelete);
}
let qkbutton = () => {
    tableData.value = []
}
let savebutton = () => {
    console.log('1==========>', tableData.value)
}
</script>
<style lang='scss' scoped>
.searchbox {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lbbox {
    flex: 1;
}

.ypbox {
    height: 100%;
}

.zsbox {
    width: 100%;
    height: 400px;
    padding: 0 20px;
    margin: 0 20px;
    overflow: auto
}

.ypitem {
    cursor: pointer;
    margin: 15px 0;
}

.infobox {
    height: 450px;
    overflow: auto;
    display: flex;
}

.mcjl {
    display: flex;
}
.bottombox{
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>